<?php include _include(ADMIN_PATH.'view/htm/header.inc.htm');?>

<style>
ul > li {list-style: none;}
ul.level1 > li { margin-top: 3rem;}
ul.level1 > li > table > tr > td > a > i { color: #d62828;}
ul.level2 > li > table > tr > td > a > i { color: #e7ba58;}
ul.level3 > li > table > tr > td > a > i { color: #8bca1d;}
</style>

<!--{hook admin_forum_list_start.htm}-->

<script type="text/x-template" id="tpl_forum">

<table width="100%">
	<tr>
		<td width="30">
			<a href="javascript:void(0);" @click="new_forum(forum.fup)" v-if="is_last"><i class="icon-plus"></i> </a>
			<a href="javascript:void(0);" v-else><i class="icon-circle"></i> </a>
		</td>
		<td>
			<input type="text" v-model="forum.name" class="form-control" placeholder="<?php echo lang('forum_name');?>" />
		</td>
		<td width="100">
			<input type="text" v-model.lazy="forum.rank" class="form-control" placeholder="<?php echo lang('forum_rank');?>" type="number" />
		</td>
		<td width="50" align="center">
			<img :src="'../'+forum.icon_url" width="32" :id="'img_'+forum.fid" />
		</td>
		<td width="100">
			<input type="file" multiple="multiple" accept=".jpg,.jpeg,.png,.gif,.bmp" class="form-control" :name="'icon['+forum.fid+']'" value="" :data-assoc="'img_'+forum.fid" placeholder="<?php echo lang('forum_icon');?>" /></td>
		<td width="100">
			<a href="javascript:void(0);" @click="new_forum(forum.fid)" v-if="level != 3" class="ml-2"><i class="icon-plus"></i></a>
			<a href="javascript:void(0);" @click="delete_forum(forum.fid)" class="ml-2"><i class="icon-trash"></i></a>
			<a :href="forum_edit_link(forum.fid)" class="ml-2"><i class="icon-gear"></i></a>
		</td>
	</tr>
</table>

</script>

<form id="form">
	<div id="forumlist">
		<ul class="level1">
			<li v-for="(cate,index) in catelist" :fid="cate.fid">
				<comp-forum :forum="cate" level="1" :is_last="index === catelist.length - 1"></comp-forum>
				<ul v-if="cate.forumlist.length > 0" class="level2">
					<li v-for="(forum,index2) in cate.forumlist" :fid="forum.fid">
						<comp-forum :forum="forum" level="2" :is_last="index2 === cate.forumlist.length - 1"></comp-forum>
						<ul v-if="forum.forumlist.length > 0" class="level3">
							<li v-for="(sub,index3) in forum.forumlist" :fid="sub.fid">
								<comp-forum :forum="sub" level="3" :is_last="index3 === forum.forumlist.length - 1"></comp-forum>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
		<p class="text-center">
			<button type="submit" class="btn btn-primary" id="submit" data-loading-text="<?php echo lang('submiting');?>..." style="width: 10rem;"><?php echo lang('confirm');?></button>
		</p>
	</div>
</form>

<!--{hook admin_forum_list_end.htm}-->

<?php include _include(ADMIN_PATH.'view/htm/footer.inc.htm');?>

<script src="../view/js/vue.js"></script>
<!--[if lt IE 10]>
<script src="../view/js/es6-shim.js"></script>
<![endif]-->

<script>

var forumlist = <?php echo xn_json_encode($forumlist_show);?>;
var forumarr = <?php echo xn_json_encode($forumarr);?>;
var forumlist_sorted = forumlist_sort(forumlist);


//var forumobj = forumlist;

var jform = $("#form");
var jsubmit = $("#submit");

jform.base64_encode_file();

var forumlist = Object.values(forumlist);

var maxfid = <?php echo forum_maxid();?>;

var app = null;

Vue.component('comp-forum', {
	props: ['forum', 'level', 'is_last'],
	template: '#tpl_forum',
	methods: {
		// 同级增加
	  	new_forum: function(fup) {
	  		var arr = {fid: ++maxfid, fup: fup, name: "新版块", icon_url: "view/img/forum.png", rank: 0};
	  		app.forumlist.push(arr);
	  	},
	  	delete_forum: function(fid) {
	  		$.xpost(xn.url('forum-delete-'+fid), function(code, message) {
			  	if(code == 0) {
			  		delete app.forumlist[fid];
			  		app.forumlist = xn.array_filter(app.forumlist);
			  		app.nextTick(function() {
			  			alert('删除成功');
			  		});
			  		//window.location.reload();
			  	} else {
			  		alert(message);
			  	}
	  		});
	  	},
	  	delete_forum_all: function(fid) {
	  		if(!window.confirm('确定删除版块（板块下的帖子会被一同清理）？')) return;
	  		var fidarr = [];
	  		for(var k in app.forumlist) {
	  			var forum = app.forumlist[k];
	  			// 删除子版块
	  			if(forum.fid == fid || forum.fup == fid) {
	  				delete app.forumlist[k];
	  				fidarr.push(fid);
	  			}
	  		}
	  		
	  		// 删除第三级
	  		for(var k in app.forumlist) {
	  			var forum = app.forumlist[k];
	  			if(xn.in_array(forum.fid, fidarr) || xn.in_array(forum.fup, fidarr)) {
	  				delete app.forumlist[k];
	  			}
	  		}
	  		
	  		$.xpost(xn.url('forum-delete-'+fid), function(code, message) {
			  	if(code == 0) {
			  		alert('删除成功');
			  	} else {
			  		alert(message);
			  	}
	  		});
	  		
	  		//app.forumlist.push();
	  		//app.forumlist.pop();
	  		app.forumlist = xn.array_filter(app.forumlist);
	  	},
	  	forum_edit_link: function(fid) {
	  		return xn.url("forum-update-"+fid);
	  	},
	  	show1: function() {
	  		//alert(123);
	  	}
  	}
});

app = new Vue({
	el: '#forumlist',
	data: {
		forumlist: forumlist,
	},
	computed: {
		catelist: function() {
			var catelist = this.find_sub_list(0);
			for(var k in catelist) {
				var cate = catelist[k];
				var forumlist = this.find_sub_list(cate.fid);
				cate.forumlist = forumlist;
				for(var k2 in forumlist) {
					var sub = forumlist[k2];
					var sublist = this.find_sub_list(sub.fid);
					sub.forumlist = sublist;
				}
			}
			return catelist;
		}
	},
	methods: {
		find_sub_list: function(fid) {
			var sublist = [];
			for(var k in this.forumlist) {
				if(this.forumlist[k]['fup'] == fid) {
					sublist.push(this.forumlist[k]);
				}
			}
			// 排序
			sublist = xn.arrlist_multisort(sublist, 'rank', false);
			return sublist;
		}
	},
	updated: function() {
		//alert('updated');
		//alert($('#forumlist').html());
	},
	mounted: function() {
		//jform.on('click', function() {alert('form clicked')});
		//alert('mounted');
		
		//$('#forumlist').on('click', function() {alert('fxxx');});
	}
	
});

jform.on('submit', function() {
	jsubmit.button('loading');
	var formdata = jform.serializeObject();
	var postdata = {
		fid: xn.arrlist_key_values(app.forumlist, 'fid', 'fid'),
		fup: xn.arrlist_key_values(app.forumlist, 'fid', 'fup'),
		name: xn.arrlist_key_values(app.forumlist, 'fid', 'name'),
		rank: xn.arrlist_key_values(app.forumlist, 'fid', 'rank'),
		icon: formdata.icon,
	}
	$.xpost(xn.url('forum-list'), postdata, function(code, message) {
		if(code == 0) {
			alert(message);
			jsubmit.button(message).delay(3000).button('reset');
		} else {
			alert(message);
		}
	});
	return false;
});


$('body').on('click', 'table', function(e) {
	//alert(123);
});

// 对 forumlist 按照 rank 进行排序。
function forumlist_sort(forumlist) {
	var arrlist = xn.array_values(forumlist);
	xn.arrlist_multisort(arrlist, 'rank', false);
	return arrlist;
}
 </script>

<!--{hook admin_forum_list_js.htm}-->